<template>

  <div class="HeightAuto llt-menu-box">
    <loginBox :isCollapse="isCollapse" />
    <div class="menu-logo-hidden-box"></div>
     <el-scrollbar 
      :style="{
    backgroundColor:$store.state.themeCurrentMenuItem.ColorBg
     }"
      class="menuHeighttAuto ">
    <el-menu
      :collapse-transition="true"
      class="el-menu-vertical-demo menuHeighttAuto"
      :default-active="$store.state.menuActiveName"
      :background-color="$store.state.themeCurrentMenuItem.ColorBg"
      :collapse="isCollapse"
    >
    <SidebarItem 
      v-for="(route, index) in sidebarRouters"
                    :key="route.path  + index"
                    :item="route"
                    :base-path="route.path"
    ></SidebarItem>
      <!-- <div v-for="(item, index) in routeMenuList" :key="index">
        <el-sub-menu :index="item.name" 
       v-if="item.children&&item.children.length>0&&!item.meta.hideMenu"
        >
          <template #title>
                <el-icon  >
                      <component :is="item.meta.icon"></component>
                </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <template     v-for="(childrenItem, childrenIndex) in item.children"
            :key="childrenIndex">
             <el-menu-item
        
            :index="childrenItem.name"
            v-if="!childrenItem.meta.hideMenu"
            >{{ childrenItem.meta.title }}</el-menu-item
          >
          </template>
        
        </el-sub-menu>
        <el-menu-item v-else-if="!item.meta.hideMenu" :index="item.name"  >
               <el-icon  >
                      <component :is="item.meta.icon"></component>
                </el-icon>
          <template #title> {{ item.meta.title }}</template>
        </el-menu-item>
      </div> -->
    </el-menu>
      </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {  h, resolveComponent,ref,  reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import {RouteList as routeMenuList} from "/@ts/router/routes/index";
import loginBox from "/@/layouts/components/logobox.vue";
import SidebarItem from '/@/layouts/components/Sidebar/SidebarItem.vue'
import { store } from '/@ts/store';
const router = useRouter();
const route = useRoute();
// const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;

const sidebarRouters = computed(()=>{
  const state: any = store.state
 return state.permissionsModule.sidebarRouters
})
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const activeIndex = ref(0);

const state = reactive({
  data: { a: 1 },
});
const handleOpen = (key: string, keyPath: Array<string>) => {
  // console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: Array<string>) => {
  // console.log(key, keyPath);
};
const handleSelect = (key: string, keyPath: Array<string>) => {
  // router.push({ name: key });
};

defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style   lang="scss" >
.menu-logo-hidden-box {
  height: 54px;
}



.llt-menu-box {
  position: relative;
  top: 0;
  left: 0;
}

.el-menu-vertical-demo {
  height: 100%;
  // height:calc(100% - 59px);
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  border: none;
}
.el-menu--collapse .el-sub-menu .el-sub-menu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
</style>
